<template>
    <div>
        <div class='good'>
            <div class='good_top'>
                <div class='good_top_xinxi'>
                    <span class='good_top_name'>收货人：
                        <span style='margin-right:40rpx;'>ONE</span>
                        <span>13797784481</span>
                    </span>
                    <span class='good_top_dizhi'>收货地址：
                        <span>湖北省武汉市建设大道遇宠宠物店</span>
                    </span>
                </div>
                <div class='good_top_right'>
                    <img src='/static/images/my_right.png' />
                </div>
            </div>

            <div class='good_wares' v-for='(good,index) in goodList' :key='index'>

                <div class='good_wares_box'>

                    <div class='good_wares_left'>
                        <img :src='good.cover' />
                    </div>
                    <div class='good_wares_Middle'>
                        <span class='text1'>{{good.desc}}</span>
                        <span class='text2'>{{good.desc2}}</span>
                        <span class='text3'>
                            <span class='text4'>{{good.price}}</span>
                        </span>
                    </div>
                    <div class='good_wares_right'>X{{good.num}}</div>

                </div>

            </div>
            <div class='good_set'>
                <div class='good_set_left'>
                    <img src='/static/images/settlement_icon.png' />
                    <span>付款方式</span>
                </div>
                <div class='good_set_right'>
                    <span>余额</span>
                    <img src='/static/images/my_right.png' />
                </div>

            </div>

            <div class='bood_bottom'>
                <div style='width: 110rpx; margin-left:40rpx; font-size: 33rpx;color:#505050;'>共1件</div>
                <div style='width: 143rpx; margin-left:250rpx; font-size: 33rpx;color:#ff703a;'>138.00</div>
                <div class='bood_bottom_but'>提交订单</div>
            </div>

        </div>
    </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
    components: {
        card
    },

    data() {
        return {
            goodList: [
                {
                    cover: "/static/images/index_pet8.png",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    num: 1
                },
                {
                    cover: "/static/images/index_pet8.png",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    num: 1
                },
                {
                    cover: "/static/images/index_pet8.png",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    num: 1
                }
            ]
        };
    },

    created() {
        const logs = wx.getStorageSync("logs") || [];
        this.logs = logs.map(log => formatTime(new Date(log)));
    },
    methods: {}
};
</script>

<style>
/* pages/settlement/index.wxss */

.good_top {
    width: 100%;
    height: 192rpx;
    line-height: 80rpx;
    border-bottom: 20rpx solid #fafafa;
    display: flex;
    justify-content: space-between;
}

.good_top_xinxi {
    display: flex;
    flex-direction: column;
    margin: 24rpx;
}

.good_top .good_top_name {
    color: #333;
    font-size: 33rpx;
    /* margin-bottom: 20rpx; */
}

.good_top .good_top_dizhi {
    color: #333;
    font-size: 26rpx;
}

.good_top_right image {
    width: 37rpx;
    height: 37rpx;
    margin-top: 68rpx;
    margin-right: 24rpx;
}

.good_wares_box {
    width: 100%;
    height: 188rpx;
    display: flex;
    align-items: center;
    border-bottom: 20rpx solid #fafafa;
    margin-top: 10rpx;
}

.good_wares_left image {
    width: 150rpx;
    height: 150rpx;
    margin-left: 82rpx;
}

.good_wares_Middle {
    display: flex;
    flex-direction: column;
    margin-left: 48rpx;
}

.good_wares_Middle .text1 {
    color: #505050;
    font-size: 28rpx;
    margin-bottom: 10rpx;
}

.good_wares_Middle .text2 {
    color: #a6a6a6;
    font-size: 20rpx;
    margin-bottom: 20rpx;
}

.good_wares_Middle .text3 {
    color: #a6a6a6;
    font-size: 16rpx;
}

.good_wares_Middle .text4 {
    color: red;
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 20rpx;
}

.good_wares_right {
    color: #505050;
    font-size: 28rpx;
    margin-left: 141rpx;
}

.good_set {
    width: 100%;
    height: 115rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

.good_set .good_set_left,
.good_set .good_set_right {
    display: flex;
    align-items: center;
    margin: 0 30rpx;
}

.good_set .good_set_left image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
}

.good_set .good_set_left text {
    color: #505050;
    font-size: 32rpx;
}

.good_set .good_set_right image {
    width: 32rpx;
    height: 32rpx;
    opacity: 0.5;
    margin-left: 20rpx;
}

.good_set .good_set_right text {
    color: #a6a6a6;
    font-size: 28rpx;
}

.bood_bottom {
    width: 100%;
    height: 103rpx;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 2rpx;
    border-top: 20rpx solid #fafafa;
}

.bood_bottom_but {
    background: #ff703a;
    width: 206rpx;
    height: 103rpx;
    color: #fff;
    text-align: center;
    line-height: 103rpx;
    font-size: 33rpx;
}
</style>
